<template>
    <div class="approval-container">
      <h2 class="title">叮~您有新的审批</h2>
      <ul>
      <li v-for="item in filteredApprovalList" :key="item.id" class="approval-item">
        <div class="item-content">
          <div style="margin-bottom: 15px;"><strong>审批名称:</strong> {{ item.workflow_name }}</div>
          <div style="margin-bottom: 15px;"><strong>申请人:</strong> {{ item.staff_name }}</div>
          <div v-for="(value, key) in fieldsDate" :key="key">
            <p> <strong>{{ key }}:</strong>{{ value }}</p>
          </div>
        </div>
        <!--      提交按钮弹框判断是否同意，然后想后端传值-->
        <div class="item-action">
          <el-button type="primary" size="small" @click="showConfirmationDialog(item.id, 1)">同意</el-button>
          <el-button type="danger" size="small" @click="showConfirmationDialog(item.id, 2)">拒绝</el-button>
        </div>
      </li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, computed } from "vue";
  import http from "../../http/index.js";
  import { ElMessage, ElMessageBox } from "element-plus";

  const approval_list = ref([]);
  
  const role_id = localStorage.getItem("userid");
  console.log("role_id", role_id);
  
  const showConfirmationDialog = (id, status) => {
    const message = status === 1 ? '确定同意吗？' : '确定拒绝吗？';
    ElMessageBox.confirm(message, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      handleApproval(id, status);
    }).catch(() => {
      ElMessage.info('已取消操作');
    });
  };
  
  // 审批操作
  const handleApproval = (id, status) => {
    console.log({ task_id: id, is_agree : status, audit_user : role_id })
    console.log("id", id, status);
    http.post(`app/approval/add_approval_record/`, { task_id: id, is_agree : status, audit_user : role_id })
      .then(res => {
        console.log(res.data);
        ElMessage.success('操作成功');
        // 重新加载页面
        window.location.reload();
      })
      .catch(error => {
        console.error('操作失败', error);
        ElMessage.error('操作失败');
      });
  };
  const fieldsDate=ref([])
  // 获取任务列表
  const getApprovalList = () => {
    http.post(`app/task/get_task_list/`, { id: role_id })
      .then(res => {
        approval_list.value = res.data.data;
        const approvallist=res.data.data
        console.log(res.data)
        for (let i = 0; i < approvallist.length; i++) {
            fieldsDate.value = JSON.parse(approval_list.value[i].params)
            console.log(fieldsDate.value)
        }
        console.log(res.data.data)
        // fieldsDate.value=JSON.parse()

      })
      .catch(error => {
        console.error('获取任务列表失败', error);
        ElMessage.error('获取任务列表失败');
      });
  };
  // 解析params

  // 计算属性，过滤掉 task_status 为 0 的项
  const filteredApprovalList = computed(() => {
    return approval_list.value.filter(item => item.task_status !== 1 && item.task_status !== 2);
  });
  
  onMounted(() => {
    getApprovalList();
  });
  </script>
  
  <style scoped>
  .approval-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    /* background-color: #f9f9f9; */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  
  .approval-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    transition: box-shadow 0.3s ease;
  }
  
  .approval-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .item-content strong {
    display: inline-block;
    width: 100px;
    color: #555;
  }
  </style>